<template>
  <div>
    <div @click="clicka">
      <iframe class="iframe" :height="iframeH" src="https://punch.kowisel.com/punch/daily?id=50840" frameborder="0"></iframe>
    </div>

    <div class="bottomNav">
      <bottom-nav :openId="openId"></bottom-nav>
    </div>
  </div>
</template>
<style scoped>
.iframe {
  width: 100%;
}
</style>
<script>
import {
  mapState,
  createNamespacedHelpers,
} from "vuex";
let {
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

const wx = require('weixin-js-sdk');
import bottomNav from '@/components/common/bottomNav'
export default {
  name: 'clockIn',
  data() {
    return {
      openId: '',
    }
  },

  created() {
    this.initWxConfig();

    this.initWxOpenId();
  },

  mounted() {

  },

  methods: {
    ...mapActions([
      'formGet'
    ]),

    clicka() {
      console.log('aaaaaaa')
    },

    initWxConfig() {
      let _this = this;
      let url = window.location.href.split('#')[0];
      url = encodeURIComponent(url)
      console.log(url);
      this.$axios.get(`http://39.105.125.149:8060/banma/getTimestampNonceStrSignature?url=${url}`)
      .then(res => {
        res = res.data.data
        console.log(res)
        wx.config({
          debug: false, // 开启调试模式,
          appId: 'wx6461e3736f9366e9', // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature,// 必填，签名，见附录1
          // jsApiList: ['openlocation', 'getLocation',] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage',],
        });

        wx.ready(function () {
          wx.onMenuShareAppMessage({ 
            title: '斑马公学线打卡', // 分享标题
            desc: '朋友推荐的美国教育博士、北大硕士研发的在线“幼小衔接思维课”，限时免费', // 分享描述
            link: 'http://www.mingxiaoclub.cn/zebraOnline/#/clockIn', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png', // 分享图标
            success: function () {
              console.log('分享给朋友---success')
              // 设置成功
            },
            error: function(err) {
              console.log(err)
            }
          })
        });

        wx.ready(function () {     
          wx.onMenuShareTimeline({ 
            title: '斑马公学线打卡', // 分享标题
            link: 'http://www.mingxiaoclub.cn/zebraOnline/#/clockIn', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://www.mingxiaoclub.cn/zebraOnline/img/icon_share.png', // 分享图标
            success: function () {
              console.log('分享到朋友圈---success')
              // 设置成功
            },
            error: function(err) {
              console.log(err)
            }
          })
        });

        wx.error(function(err){
          console.log(err)
        })


      }).catch(err => {
        
      })
    },

    initWxOpenId() {
      let url = window.location.href;
      url = encodeURIComponent(url)
      // console.log(url)
      let code = this.getUrlParam('code')
      if(!code) {
        window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6461e3736f9366e9&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`)
      } else {
        this.wxCode = code;
        this.$axios.get(`http://39.105.125.149:8060/banma/getOpenId?code=${this.wxCode}`)
        .then(res => {
          console.log('微信openId：' + res.data.data)   // openId
          this.openId = res.data.data;
          
          // this.queryStudentByOpenId();
        }).catch(res => {
          
        })
      }
      console.log(this.wxCode);
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
  },



  computed: {
    iframeH() {
      return document.documentElement.clientHeight - 110
    }
  },

  components: {
    bottomNav
  },
}
</script>

<style scoped>
  
</style>




 